根據上一堂課所下載的課程教材,第一堂課我們要做的是一個相當有趣的實作—「鍵盤爵士鼓組」。敲打鍵盤特定字母,發出對應的打擊聲,範例如下:
Drum Kit實作範例
基本上這個實作所要做的只有兩件事:
data-* attribute:在HTML5中,有個特別的元素屬性"data-XXX",XXX是自訂的任何字串。此為客製化屬性,使用者可以在這屬性中儲存資料。像是在實作中,我們賦予div一個data-key的屬性,裡面儲存鍵盤按鍵所對應的編碼。如:
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
而這個屬性有兩個需要注意的地方:
addEventListener():本實作的重要函數,用來監聽keydown以及transitionend,分別是按下鍵盤的動作以及css的過場結束。
ES6 Template literals:JavaScript ES6 中的模版字符串,當你需要在JS裡加入HTML內容,或是要打需要換行的字串,又或是想要將變數插入字串中,這是一個非常好用的方法。請大家熟練這個方法,因為後面的課程會常常用到。那要如何使用呢?就是鍵盤左上角的反引號"`"。
例如,在以前在JS寫HTML內容:
var content_old = '<header>\n'+
'<div class="banner">\n'+
'<img src="apple.jpg"\n'+
'</div>\n'+
'</header>'
現在我們可以這樣寫:
var content_new = `
<header>
<div class='banner'>
<img src="apple.jpg>
</div>
</header>
`
那如果要在字串中插入變數,方法為${...}
,在這次實作的程式碼中,範例如下:
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
ES6 Arrow Function:箭頭函式有幾個好處,簡潔、好讀、綁定this。 直接示範如何使用,傳統函式宣告:
const func = function (x) { return x + 1 }
箭頭函式宣告:
const func = (x) => x + 1
return
這個關鍵字。var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
上面許多範例只有點到皮毛,想要看更多,請至下列參考來源